<!--
    @作者：814878176@qq.com
    @时间：2020-03-30
    @描述：活动主题2【清明祭祖祈福】
	@使用："path": "pages/activityTwo/index"
 -->
<template>
	<view>
		<!-- 返回首页按钮 -->
		<view class="back-home-btn" @click="$backPage()">
			<image class="uni-image" mode="widthFix" src="/static/common/back_btn.png" />
		</view>
		<!-- 要有一张背景图定位在底部的 -->
		<image class="uni-image img-bg" mode="widthFix" src="/static/activityTwo/bg_1.png" />
		<view class="content-wrapper">
			<!-- 主题标题图 -->
			<view class="banner">
				<image class="uni-image" mode="widthFix" src="/static/activityTwo/banner.png" />
			</view>
			<!-- 景点景区 -->
			<view class="view-wrapper">
				<!-- 景区背景图 -->
				<image class="uni-image view-bg" mode="widthFix" src="/static/activityTwo/map_bg_1.png" />
				<view class="inwrapper">
					<!-- 下灌村 -->
					<image @click="viewFun(1)" class="spot spot-1" src="/static/activityTwo/spot_1.png" mode="widthFix"></image>
					<!-- 舜帝陵 -->
					<image @click="viewFun(2)" class="spot spot-2" src="/static/activityTwo/spot_2.png" mode="widthFix"></image>
					<!-- 紫霞岩 -->
					<image @click="viewFun(3)" class="spot spot-3" src="/static/activityTwo/spot_3.png" mode="widthFix"></image>
					<!-- 永福寺 -->
					<image @click="viewFun(4)" class="spot spot-4" src="/static/activityTwo/spot_4.png" mode="widthFix"></image>
					<!-- 舜帝庙考古遗址公园 -->
					<image @click="viewFun(5)" class="spot spot-5" src="/static/activityTwo/spot_5.png" mode="widthFix"></image>
					<!-- 已游景点个数和跳转按钮 -->
					<view class="counts" @click="goDetailPage()">
						<image class="uni-image" src="/static/activityTwo/btn_1.png" mode="widthFix"></image>
						<view class="text-inwrapper">
							<view class="text">
								已游<text class="num">{{feteCount || 0}}个</text>景点
							</view>
							<view class="text">
								点击前往祭舜祈福
							</view>
						</view>
					</view>
					<!-- 提示信息，合并到背景图 -->
					<!-- <image class="tips" src="/static/activityTwo/tips.png" mode="widthFix"></image> -->
					<!-- <view class="tips">
						<view class="uni-lh-36 uni-fsz-24">
							舜小君提示：
						</view>
						<view class="uni-lh-36 uni-fsz-24">
							点击游览景点，获得网上祭祀用品
						</view>
					</view> -->
				</view>
			</view>
			<view class="uni-p-b-130"></view>
		</view>
		<tabBar :rootPath="'activityTwo'" :pagePath="'/index'"></tabBar>
		<!-- 景点简介弹出框 -->
		<uni-popup ref="viewPopup" :type="'center'" :custom="true" :mask-click="false">
			<view class="view-info">
				<image class="uni-image img-bg" mode="widthFix" src="/static/activityTwo/border_bg_1.png" />
				<view class="close-btn" @click="viewFun(false)"></view>
				<scroll-view scroll-y="true" class="record-scroll-view scroll-Y">
					<view class="title-img">
						<image class="uni-image" mode="widthFix" src="/static/activityTwo/title_1.png" />
					</view>
					<view class="content" v-html="spotContent">
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<!-- 祭品领取弹框 -->
		<uni-popup ref="offeringsPopup" :type="'center'" :custom="true" :mask-click="false">
			<view class="offerings">
				<image class="uni-image img-bg" mode="widthFix" :src="offeringsList[offeringsType]" />
				<view class="close-btn" @click="offeringsFun(false)"></view>
				<view class="ok-btn" @click="offeringsFun(offeringsType)"></view>
			</view>
		</uni-popup>
		<view v-if="!showPage" class="bank-wrapper">
			<!-- 加载进度条 -->
			<!-- <view class="bar-wrapper">
				<view class="inwrapper" :style="'width:' + barWidth + '%'"></view>
				<text class="num">{{Math.round(barWidth) + '%'}}</text>
			</view> -->
		</view>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				showPage: false,
				barWidth: 0,
				barTimeIndex: 0,
				offeringsList: [
					"/static/activityTwo/offerings_1.png",
					"/static/activityTwo/offerings_2.png"
				],
				offeringsType: 0,   // 祭品类型
				offeringsTimeIndex: 0,
				feteCount: '',	// 已祭祀的景点数
				spotContent: '', // 景点介绍
				currentSpot: 1,  // 当前点击的景点
				feteType: [], // 已游览景点类型，不同景点不重复计数
			}
		},
		onLoad() {
			// 请求数据
			this.getFeteCount();
			this.getFeteRank();
			// 设置背景音乐
			// this.$musicPlay('http://www.foshannews.net/images/2020zt/wx/nhmz/888/dist//assets/9f78c81c98f9dfa86c6ece011d0670fd.mp3');
			// 延迟显示页面内容
			clearTimeout(this.barTimeIndex);
			this.barWidth = 0;
			this.barTimeIndex = setInterval(()=>{
				this.barWidth = this.barWidth + 4;
				if(this.barWidth>=100) {
					clearInterval(this.barTimeIndex);
					this.showPage = true;
				}
			},10)
		},
		methods: {
			/**
			 * 祭品领取 - 浏览景点后都随机出现一个祭品
			 * @param {Object} type 
			 */
			offeringsFun(type) {
				if(type===false) {
					this.$refs.offeringsPopup.close();  
				}else if(type===true) {
					clearTimeout(this.offeringsTimeIndex);
					this.offeringsTimeIndex = setTimeout(()=>{
						this.$refs.offeringsPopup.open();   // 弹出框
					},500)
				}else {
					// 领取祭品触发事件
					let num = localStorage.getItem('offeringsCount') || 0;
					num++;
					localStorage.setItem('offeringsCount', num);
					// 关闭弹框
					this.$refs.offeringsPopup.close();  
				}
			},
			/**
			 * 获取向始祖舜帝祈福的人数
			 */
			getFeteRank() {
				this.$request({
					 method: "GET",
					 url: PATHAPI + '/feteTotalCount',
					 data: {},
					 success: (res) => {
						 if(res.data.status == 'success'){
							localStorage.setItem('feteRank', res.data.data.rank);
						 }else{
							 alert(res.data.message);
						 }
					 }
				});
			},
			/**
			 * 浏览景点
			 * @param {Object} type 景点类型
			 */
			viewFun(type) {
				if(type===false) {
					this.$refs.viewPopup.close();  
					this.offeringsType = this.$options.filters.randomNum(0,1);
					this.offeringsFun(true);
					// 浏览景点关闭 - 已游景点+1
					//this.feteCount++;
				}else {
					this.currentSpot = type;
					this.getSpotContent(type);
					this.$refs.viewPopup.open(); 
				}
			},
			/**
			 * 获取已游景点数
			 */
			getFeteCount() {
				this.$request({
					 method: "GET",
					 url: PATHAPI + '/feteCount',
					 data: {},
					 success: (res) => {
						 if(res.data.status == 'success'){
							this.feteCount = res.data.data.fete_count;
						 }else{
							 alert(res.data.message);
						 }
					 }
				});
			},
			/**
			 * 获取景点介绍
			 */
			getSpotContent(type) {
				this.$request({
					 method: "GET",
					 url: PATHAPI + '/getSpotText',
					 data: {
						 type: 'spot' + type
					 },
					 success: (res) => {
						 if(res.data.status == 'success'){
							this.spotContent = res.data.data.content;
							this.feteCount = res.data.data.fete_count;
							this.spotContent = this.spotContent.replace(/\<img/gi, '<img style="max-width:100%;"');
						 }else{
							 alert(res.data.message);
						 }
					 }
				});
			},
			// 页面路由跳转
			goDetailPage() {
				let offeringsCount = localStorage.getItem('offeringsCount');
				if(!offeringsCount || offeringsCount==0) {
					uni.showToast({title:"舜小君提示：\n 点击游览景点，获得网上祭祀用品 ", icon:"none"});
					return;
				}
				uni.navigateTo({
					url: "/pages/activityTwo/indexNav?type=" + this.currentSpot
				});
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import "../../common/css/var.styl"   
	.img-bg {
		min-height: 100%;
	}
	.content-wrapper {
		position: absolute;
		top: 0;
		width: 100%;
		.banner {
			position: relative;
			z-index: 9;
		}
		// 景点景区
		.view-wrapper {
			position: relative;
			margin-top: -80upx;
			.view-bg {
				width: calc(100% - 20upx);
			}
			.inwrapper {
				position: absolute;
				top: 0;
				width: 100%;
				height: 100%;
				// 景点按钮
				.spot {
					position: absolute;
					z-index: 100;  /*要比返回按钮的层级高99*/
					min-height: 40upx;
				}
				// 下灌村
				.spot-1 {
					top: 7%;
					left: 7%;
					width: 188upx;
				}
				// 舜帝陵
				.spot-2 {
					top: 21%;
				    left: 9%;
					width: 172upx;
				}
				// 紫霞岩
				.spot-3 {
					top: 59%;
					left: 13%;
					width: 142upx;
				}
				// 永福寺
				.spot-4 {
					top: 60%;
					right: 22%;
					width: 159upx;
				}
				// 舜帝庙考古遗址公园
				.spot-5 {
					top: 76%;
					right: 10%;
					width: 349upx;
				}
				// 已游景点个数和跳转按钮
				.counts {
					position: absolute;
					top: 16%;
					right: 0%;
					.uni-image {
						// width: 156upx;
						width: 279upx;
					}
					.text-inwrapper {
						position: absolute;
						top: 20upx;
						left: 40upx;
						z-index: 99;
						width: 100%;
						box-sizing: border-box;
						color: #112504;
						text-align: left;
						.text {
							line-height: 42upx;
							font-size: 28upx;
							font-weight: bold;
						}
						.num {
							font-size: 44upx;
							font-weight: bold;
						}
					}
				}
				// 提示
				.tips {
					position: absolute;
					left: 30upx;
					bottom: 30upx;
					color: #1e4224;
					width: 373upx;
				}
			}
		}
	}
	// 景点简介弹框
	.view-info {
		position: relative;
		display: inline-block;
		width: 616upx;
		margin-top: -80upx;
		// 背景边框
		.img-bg {
			width: 100%;
		}
		.record-scroll-view {
			position: absolute;
			top: 0;
			height: calc(100% - 106upx);
			padding: 40upx 10upx;
			box-sizing: border-box;
			// 记录标题
			.title-img {
				position: relative;
				z-index: 99;
				margin: 10upx auto;
				.uni-image {
					width: 218upx;
				}
			}
			// 简介内容
			.content {
				padding: 20upx 40upx;
				img {
					
				}
			}
		}
	}
	// 领取祭品
	.offerings {
		position: relative;
		display: inline-block;
		width: 450upx;
		margin-top: -80upx;
	}
</style>

